<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查看物流</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/product.css">
	<style>
		.yunshuList{
			width: 600px;
		    height: auto;
		    margin: 20px auto;
		    border-bottom: 1px solid #e6e6e6;
		}
		.yunshuList li{
			float: left;
			width: 440px;
			line-height: 30px;
		}
		.yunshuList li:nth-child(2){
			margin-top:15px;
		}
		.yunshuList .yunshuImg{
			width: 140px;
			margin-right: 10px;
		}
		ol{
			width: 600px;
		    height: auto;
		    margin: 0 auto;
		}
		ol li{
			padding-bottom:20px;
			margin-left:20px; 
			position: relative;
		    border-left: 1px solid #e6e6e6;
		}
		ol li:last-child{
			padding-bottom:0px;
		}
		ol li p{
			width: 100%;
			height: 24px;
			line-height: 24px;
		}
		ol li p>span:nth-child(1){
			width: 130px;
		    display: inline-block;
		    height: 24px;
		    line-height: 24px;
		    text-align: center;
		}
		ol li p>span:nth-child(2){
			width: 50px;
		    display: inline-block;
		    height: 24px;
		    line-height: 24px;
		}
		ol li p>span:nth-child(3){
			width: 80px;
		    display: inline-block;
		    height: 24px;
		    line-height: 24px;
		}
		ol li p>span:nth-child(4){
			width: auto;
		    display: inline-block;
		    height: 24px;
		    line-height: 24px;
		}
		.icon-nowyunshu{
			position: absolute;
		    display: inline-block;
		    width: 24px;
		    height: 24px;
		    left: -12px;
		    top: -1px;
		    background: url(images/icon-now.png)no-repeat
		}
		.icon-oldyunshu{
			position: absolute;
		    display: inline-block;
		    width: 24px;
		    height: 24px;
		    left: -13px;
		    top: -1px;
			background: url(images/icon-old.png)no-repeat;
		}
		.color-red{
			color:#ff5c5c;
			font-weight: bold;
		}
		.color-black{
			color:#333;
			font-weight: bold;
		}
	</style>
</head>
<body style="background:#fff;">
	<div style="margin-bottom:50px;">
		<ul class="yunshuList clearfix"> 
			<li class="yunshuImg"><img src="images/yunshu.png" alt=""></li>
			<li>快递公司：<span>中通快递</span></li>
			<li>快递单号：<span>123455668766</span></li>
			<li>物流状态：<span class="color-red">待取件</span></li>
			<li>官方电话：<span>9511</span></li>
		</ul>
		<ol>
			<li>
				<i class="icon-nowyunshu"></i>
				<p><span>2018-02-02</span><span>周二</span><span class="color-black">13:00:00</span><span class="color-black">已签收</span></p>
			</li>
			<li>
				<i class="icon-oldyunshu"></i>
				<p><span>2018-02-02</span><span>周二</span><span>13:00:00</span><span>已签收</span></p>
				<p><span></span><span></span><span>13:00:00</span><span>已签收</span></p>
				<p><span></span><span></span><span>13:00:00</span><span>已签收</span></p>
				<p><span></span><span></span><span>13:00:00</span><span>已签收</span></p>
			</li>
			<li>
				<i class="icon-oldyunshu"></i>
				<p><span>2018-02-02</span><span>周二</span><span>13:00:00</span><span>已签收</span></p>
				<p><span></span><span></span><span>13:00:00</span><span>已签收</span></p>
				<p><span></span><span></span><span>13:00:00</span><span>已签收</span></p>
				<p><span></span><span></span><span>13:00:00</span><span>已签收</span></p>
			</li>
			<li>
				<i class="icon-oldyunshu"></i>
				<p><span>2018-02-02</span><span>周二</span><span>13:00:00</span><span>已签收</span></p>
			</li>
		</ol>
	</div>
</body>
</html>